<!--
  #%L
  thinkbig-ui-feed-manager
  %%
  Copyright (C) 2017 ThinkBig Analytics
  %%
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
  
      http://www.apache.org/licenses/LICENSE-2.0
  
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  #L%
  -->
<div>

  <card-layout header-css="filter-header" class="centered">

    <header-section>
      <div layout="row" layout-align="center start">
        <div class="card-title">导入模板</div>
        <span flex></span>
        <ng-md-icon icon="file_upload" style="fill:#F08C38;padding-right:16px;" size="30"></ng-md-icon>
      </div>
    </header-section>


    <body-section>


      <div layout="column" class="md-padding">

        <div>
          <div class="item-title">从另一个环境导入以下其中一个:</div>
        </div>

        <div class="layout-padding-indent">
          <md-list flex layout-fill class="list-item-table list-condensed">

            <md-list-item>
              <div layout="row" layout-fill>
                <div flex="20" class="md-list-item-text hint">
                  类型
                </div>
                <div flex="10" class="md-list-item-text hint">
                  文件类型
                </div>
                <div flex="60" class="md-list-item-text hint">
                  描述
                </div>

              </div>
            </md-list-item>


            <md-list-item>
              <div layout="row" layout-fill>
                <div flex="20" class="md-list-item-text ">
                  NiFi 模板
                </div>
                <div flex="10" class="md-list-item-text ">
                  XML
                </div>
                <div flex="60" class="md-list-item-text ">
                  导入 NiFi 模板
                </div>
              </div>
            </md-list-item>
            <md-list-item>
              <div layout="row" layout-fill>
                <div flex="20" class="md-list-item-text ">
                  Kylo 模板 bundle
                </div>
                <div flex="10" class="md-list-item-text ">
                  ZIP
                </div>
                <div flex="60" class="md-list-item-text ">
                  导入Kylo配置和NiFi模板
                </div>
              </div>
            </md-list-item>
          </md-list>
        </div>

        <div layout="column" style="padding-top:15px;"
             class="layout-padding-indent">
          <upload-file upload-file-model="vm.templateFile"></upload-file>

          <div ng-if="vm.uploadType == 'zip'">
            <!-- validation messages -->
            <div ng-if="vm.templateDataImportOption.errorMessages != null && vm.templateDataImportOption.errorMessages.length >0">
              <div ng-repeat="message in vm.templateDataImportOption.errorMessages" layout="column">
                <div><ng-md-icon icon="warning" size="20" class="warn"></ng-md-icon> <span>{{message}}</span></div>
              </div>
            </div>

            <div ng-if="vm.nifiTemplateImportOption.errorMessages != null && vm.nifiTemplateImportOption.errorMessages.length >0">
              <div ng-repeat="message in vm.nifiTemplateImportOption.errorMessages" layout="column">
                <div><ng-md-icon icon="warning" size="20" class="warn"></ng-md-icon> <span>{{message}}</span></div>
              </div>
            </div>

            <div layout="row" >

            <md-input-container class="condensed-no-float md-block layout-padding-bottom" flex="50" >
              <md-checkbox ng-model="vm.templateDataImportOption.overwrite" aria-label="Overwrite if exists">
                Overwrite
              </md-checkbox>
              <div class="hint" style="margin-top:-10px">
                如果NiFi中已经存在具有相同名称（如.zip内）的Feed模板，则它将被替换。              </div>
            </md-input-container>
              <md-input-container class="condensed-no-float md-block layout-padding-bottom" flex="50" >
                <md-checkbox ng-model="vm.reusableTemplateImportOption.overwrite" aria-label="Overwrite if exists" >
                  导入可重用的模板
                </md-checkbox>

                <div class="hint" style="margin-top:-10px">
                   如果存档包含可重用的模板，那么它将被导入。 如果在NiFi中存在具有相同名称的可重用模板，则它将被替换并重新初始化。
                </div>
              </md-input-container>

            </div>

            <div ng-if="vm.templateDataImportOption.properties && vm.templateDataImportOption.properties.length >0 " flex layout="column">
              <div class="layout-padding-bottom">The following properties need to be supplied before importing this feed template</div>

              <div ng-repeat="prop in vm.templateDataImportOption.properties" layout="column" layout-align="start start">
                <span>{{prop.processorName}}</span>
                <div layout="row" flex layout-fill>
                  <md-input-container>
                    <label>{{prop.propertyKey}}</label>
                    <input type="text" ng-model="prop.propertyValue" autocomplete="false" name="{{prop.inputName}}">
                  </md-input-container>
                </div>
              </div>
            </div>

            <!-- ask to import reusable template if found -->
            <div ng-if="(vm.templateDataImportOption.overwrite)|| (vm.reusableTemplateImportOption.errorMessages != null && vm.reusableTemplateImportOption.errorMessages.length >0)">
              <div ng-repeat="message in vm.reusableTemplateImportOption.errorMessages" layout="column">
                <div><ng-md-icon icon="warning" size="20" class="warn"></ng-md-icon> <span>{{message}}</span></div>
              </div>

              <div ng-if="vm.reusableTemplateImportOption.properties && vm.reusableTemplateImportOption.properties.length >0" flex layout="column">
                <div class="layout-padding-bottom">The following properties need to be supplied before importing this feed template</div>

                <div ng-repeat="prop in vm.reusableTemplateImportOption.properties" layout="column" layout-align="start start">
                  <span>{{prop.processorName}}</span>
                  <div layout="row" flex layout-fill>
                    <md-input-container>
                      <label>{{prop.propertyKey}}</label>
                      <input type="text" ng-model="prop.propertyValue" autocomplete="false" name="{{prop.inputName}}">
                    </md-input-container>
                  </div>
                </div>
              </div>


            </div>


          </div>

          <div ng-if="vm.uploadType == 'xml'"  layout-fill>
            <div ng-if="vm.nifiTemplateImportOption.errorMessages != null && vm.nifiTemplateImportOption.errorMessages.length >0">
              <div ng-repeat="message in vm.nifiTemplateImportOption.errorMessages" layout="column">
                <div><ng-md-icon icon="warning" size="20" class="warn"></ng-md-icon> <span>{{message}}</span></div>
              </div>
            </div>


            <div layout="row">
            <md-input-container class="condensed-no-float md-block layout-padding-bottom" flex="50">
              <md-checkbox ng-model="vm.nifiTemplateImportOption.overwrite" aria-label="Overwrite if exists">
                覆盖
              </md-checkbox>
              <div class="hint" style="margin-top:-10px">
                替换具有相同名称的NiFi中的任何现有模板。
              </div>
            </md-input-container>


            <md-input-container class="condensed-no-float md-block layout-padding-bottom" flex="50">
              <md-checkbox ng-model="vm.reusableTemplateImportOption.shouldImport" aria-label="Create a reusable flow (callable by other flows)">
                创建可重用流
              </md-checkbox>
              <div class="hint" style="margin-top:-10px">
                在NiFi中的“reusable_templates”进程组下，从此模板创建一个可重用的流程。 其他管道模板可以通过连接到它来重用此模板的流。              </div>
            </md-input-container>
            </div>

          </div>

        </div>

        <div layout="row" class="layout-padding-top">
          <md-button class="md-raised md-primary" ng-click="vm.importTemplate();" ng-if="vm.templateFile != null"
                     ng-disabled="vm.uploadInProgress">
            导入模板
          </md-button>
          <span flex="5"></span>
          <md-progress-linear flex md-mode="determinate" value="{{vm.uploadProgress}}" ng-if="vm.uploadInProgress"></md-progress-linear>
        </div>

        <div layout="column">
          <div ng-repeat="msg in vm.uploadStatusMessages" layout="row">
            <div flex>
                <span ng-if="msg.complete && msg.success">
                   <ng-md-icon icon="check" size="20" style="fill:green"></ng-md-icon>
                </span>
              <span ng-if="msg.complete && !msg.success">
                  <ng-md-icon icon="error" size="20" style="fill:red"></ng-md-icon>
                </span>
              <span>{{msg.message}}</span>
            </div>
          </div>
        </div>



      </div>

      <div ng-if="vm.importResult != null" class="layout-padding-indent layout-padding-top-bottom">
        <div layout="row">
          <ng-md-icon icon="{{vm.importResultIcon}}"
                      ng-style="{'fill':vm.importResultIconColor}"></ng-md-icon>
          <span style="padding-left:15px;">{{vm.message}}</span>
          <span flex></span>
        </div>
        <md-list class="padding-left" ng-repeat="(severity,errors)  in vm.errorMap">
          <md-subheader class="md-warn" ng-if="errors.length >0">Errors</md-subheader>
          <md-list-item class="md-2-line" ng-repeat="error in errors track by $index">
            <div class="md-list-item-text">
              <div ng-if="error.processorName != null && error.processorName != '' "
                   style="color:grey">处理器: {{::error.processorName}}
              </div>
              <div class="md-warn-text">{{::error.message}}</div>
            </div>
            <md-divider ng-if="!$last"></md-divider>
          </md-list-item>
        </md-list>

        <!-- reorder -->

        <div ng-if="!vm.xmlType && vm.showReorderList">
          <thinkbig-template-order template-id="vm.importResult.templateId" template-name="vm.importResult.templateName" add-as-new="false" add-save-btn="true"></thinkbig-template-order>
        </div>


      </div>
</body-section>
</card-layout>
</div>
